<template>
  <div class="my-img-upload">
    <!-- 在组件绑定的类默认都是添加到组件上的根节点 -->
    <el-upload
      :before-upload="checkUpload"
      :on-change="onChange"
      :http-request="handleUpload"
      :on-remove="handleRemove"
      :class="{hideplus:imgLen}"
      :on-preview="preview"
      :file-list="fileList"
      list-type="picture-card"
      action="#"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 进度条 -->
    <el-progress v-if="isUploading" class="progress-tip" type="circle" :percentage="percentage" />
    <!-- 弹窗 -->
    <el-dialog width="600px" top="8vh" title="图片预览" :visible.sync="showDialog">
      <img width="100%" :src="imgUrl">
    </el-dialog>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDWqvjIacNr59yXpse9NK1ScV8VbpoXzA4', // 身份识别ID
  SecretKey: 'g5E9vRgeLlumOjna5LK1RaS4OREkzyg7' // 身份秘钥
})

export default {
  name: 'ImageUpload',
  props: {
    // 控制上传的数量
    limit: {
      type: Number,
      default: 1
    },
    // 显示默认图片的地址
    defaultImg: {
      type: [Array, String],
      required: true
    }
  },
  data() {
    return {
      fileList: [
        // { url:
        //    'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
      // 上传图片的地址 ,弹窗使用
      imgUrl: '',
      //   控制弹窗的显示与隐藏
      showDialog: false,
      // 控制进度条的显示与隐藏
      isUploading: false,
      // 进度条的进度
      percentage: 0
    }
  },
  // 是否添加隐藏上传文件的类名
  computed: {
    // 计算上传图片的长度 , 判断是否已经上传了一张
    // 大于等于this.limit , 只能上传this.limit张
    imgLen() {
      return this.fileList.length >= this.limit
    }
  },
  // 初始化默认照片 , 使用侦听器
  watch: {
    defaultImg(urls) {
      // this.fileList = urls.map(url => {
      //   return {
      //     url: url
      //   }
      // })
      if (typeof urls === 'string') {
        this.fileList = [{ url: urls }]
      } else if (typeof urls === 'object') {
        this.fileList = urls.map(url => {
          return {
            url: url
          }
        })
      }
    }
  },
  // 页面创建看到默认头像
  // created() {
  //   this.fileList.push({
  //     url: this.defaultImg
  //   })
  // },
  methods: {
    // 上传图片之前的检查
    checkUpload(file) {
      // console.log(file)
      // 检测文件的类型格式 , 图片格式
      const types = ['image/png', 'image/jpeg', 'image/gif']
      if (!types.includes(file.type)) {
        // 不支持的格式
        this.$message.error('必须上传png,jpeg,gif三种类型之一')
        return false
      }
      // 检测文件的大小(限制1M以内)
      if (file.size / 1024 / 1024 > 1) {
        this.$message.error('图片不可以超过1M')
        return false
      }
      return true
    },
    // 当图片状态切换时 , 触发
    onChange(file, filelist) {
      // 参数一 :  上传的文件 , 可以本地预览
      // 参数二 : 上传成功后的文件 ,
      // console.log(file)
      // console.log(filelist)
      this.fileList = filelist
    },
    // 手动上传文件
    handleUpload(params) {
      // console.log(params)
      // 参数 : 上传成功的文件 , 本地预览比较麻烦 , 自己设置 , 配合on-change事件本地预览
      // console.log(params.file)
      if (params.file) {
        // 显示进度条
        this.isUploading = true
        // 执行上传操作
        cos.putObject({
          /* 存储桶名称 */
          Bucket: 'tracy-1308732858',
          /* 存储桶所在地域，必须字段 */
          Region: 'ap-nanjing',
          /* 文件名 */
          Key: params.file.name,
          // 上传模式, 标准模式（默认即可）
          StorageClass: 'STANDARD',
          // 上传文件对象
          Body: params.file,
          // 监听上传的进度
          onProgress: (progressData) => {
            // console.log(JSON.stringify(progressData))
            // 显示进度条
            this.isUploading = true
            this.percentage = progressData.percent * 100
            // 判断如果进度===1
            if (progressData.percent === 1) {
              // 进度完成
              this.isUploading = false
              // 重新上传图片
              this.percentage = 0
            }
          }
        }, (err, data) => {
          // 上传的结果 : 如果err有值 , 证明上传失败了 , 如果err是null表示上传成功
          // data表示上传成功后 ,腾讯云返回的图片地址
          // console.log(err || data)
          // 上传失败
          if (err) {
            // 进度也完成
            this.isUploading = false
            this.$message.error('上传图片失败')
          }
          // data表示上传成功后后端返回的数据
          // 选中图片后，this.fileList中本来已经有了选中的这张图片的信息 , fileList中有张图片了(on-change做的)
          // 上传成功后需要把对应的图片的地址修改为腾讯云上传成功的地址，并且修改完成状态
          // 把返回的图片地址提交后台
          if (data.statusCode === 200) {
            // 检测图片文件中是否有了该图片
            const fileInfo = this.fileList.find(item => item.uid === params.file.uid)
            // console.log(fileInfo)
            // 如果有这张图片 , 直接覆盖掉原来的文件信息
            if (fileInfo) {
              // 将状态改成success
              fileInfo.status = 'success'
              // 修改腾讯云的上传成功的图片路径
              fileInfo.url = 'https://' + data.Location
            }
          } else {
            this.$message.error('上传图片失败')
          }
          setTimeout(() => {
            this.isUploading = false
            this.percent = 0
          }, 500)
        })
      }
    },
    // 删除图片数据
    handleRemove(file, filelist) {
      // console.log(file)
      // 参数一file表示要删除的文件信息
      // 参数二fileList表示删除之后剩余的文件信息
      // console.log(filelist)
      // file表示当前处理的文件信息
      this.fileList = filelist
    },
    // 预览图片的信息
    preview(img) {
      // 保存预览图片的地址
      this.imgUrl = img.url
      // 弹窗显示
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
.my-img-upload {
    width: 500px;
    .progress-tip{
      position: absolute;
      left: 10px;
      top: 10px;
    }
    // 控制上传按钮的显示与隐藏
    //有这个类,就会隐藏 , 没有就不会隐藏
    .hideplus{
      //在类名之前加
      // scss深度选择器的需要使用 ::v-deep
      //less深度选择器需要: /deep/
      ::v-deep .el-upload--picture-card{
        display: none;
      }
    }
}
</style>
